
var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
	//配置默认入口出口
	entry: './src/main.js', //设置默认入口文件路径
	output: {
		path: path.resolve(__dirname, 'dist'),	//设置默认出口文件目录
		filename: 'bundle.js'  //设置默认出口文件名
	},

	mode: "production",

	//自动生成html文件的配置
	plugins: [new HtmlWebpackPlugin(
		{ template: './public/index.html' }
		//以这个文件为模板，在dist文件中再自动生成一个html文件
	)],


	//loader配置
	module: {
		rules: [
			//CSS文件
			{
				test: /\.css$/i,   //识别以.css后缀的文件，不区分大小写
				use: ['style-loader', 'css-loader']
			},
			//less文件
			{
				test: /\.less$/i,   //识别以.less后缀的文件，不区分大小写
				use: ['style-loader', 'css-loader', 'less-loader']
			},
			//图片
			{
				test: /\.(png|jpg|gif|jpeg)$/i,
				type: 'asset'
			},
			//字体图标
			{ // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
				test: /\.(eot|svg|ttf|woff|woff2)$/,
				type: 'asset/resource',
				generator: {
					filename: 'font/[name].[hash:6][ext]'
				}
			},
			//JS降级
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
					}
				}
			}

		]
	},


	devServer: {
		port: 8888,// 端口号
		open: true  //默认打开
	}
}